<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05-计算属性，方法与侦听器</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
	{{fullName}}
	{{age}}
	{{fullName2()}}
	</div>
</body>
<script>
var vm=new Vue({
	el:'#app',
	data:{
		firstName:'Evan',
		lastName:'Zhang',
		fullName:'Evan Zhang',
		age:25
	},
	methods:{
		fullName2:function(){
			console.log('运行了一次')
			return this.firstName + " " + this.lastName;
		}
	},
	//计算属性
	computed:{
		fullName:function(){
			console.log('计算了一次')
			return this.firstName + " " + this.lastName;
		}
	},
	//侦听器
	watch:{
		firstName:function(){
			console.log('侦听器运算了一次')
			this.fullName = this.firstName + " " + this.lastName;
		},
		lastName:function(){
			console.log('侦听器运算了一次')
			this.fullName = this.firstName + " " + this.lastName;
		}
	}
})
</script>
</html>